<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background: #FFFFFF;
			}
			.box{
				width: 500px;
				height: 500px;
				margin: 20px auto;
				box-shadow: 3px 3px 15px #2b2b2b;
				background: #000;
			}
			.cube{
				display: inline-block;
				width: 80px;
				height: 50px;
			}
			.cube-box{
				position: relative;
				width: 200px;
				height: 200px;
				margin: 100px auto;
				transform-style: preserve-3d;
				transform: rotateY(-30deg) rotateX(57deg);
			}
			.cube-box>div{
				width: 200px;
				height: 200px;
				opacity: 0.7;
				position: absolute;
			}
			.up{
				background:red;
				transform:rotateX(90deg) translateZ(100px);
			}
			.down{
				background:orange;
				transform:rotateX(-90deg) translateZ(100px);
			}
			.left{
				background:yellow;
				transform:rotateY(-90deg) translateZ(100px);
			}
			.right{
				background:blue;
				transform:rotateY(-90deg) translateZ(100px);
			}
			.before{
				background:cyan;
				transform:translateZ(100px);
			}
			.after{
				background:purple;
				transform:translateZ(-100px);
			}
		</style>
	</head>
	<body>
		<div class="cube-box">
			<div class="up"></div>
			<div class="down"></div>
			<div class="left"></div>
			<div class="right"></div>
			<div class="before"></div>
			<div class="after"></div>
		</div>
		<div id="lyychart" class="box"></div>
		<span class="cube" style="background: #e53935;"></span>
		<span class="cube" style="background: #e6c104;"></span>
		<span class="cube" style="background: #4d81e1;"></span>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/lyy.js" ></script>
		<script type="text/javascript">
    		var lyy = new Lyy('lyychart'),option;
    		function cylinder(){
				option={type:'cylinder',x:250,y:250,z:0,r:80,h:200,radius:50,is3d:true,animal:false,opacity:1,rotateX:80,rotateZ:10}
				lyy.setParam(option);
				option={type:'cylinder',x:250,y:250,z:200,r:90,h:20,is3d:true,radius:0,animal:false,opacity:1,colors:['green']}
				lyy.addObject(option);
    		}
    		cylinder();
			function guoqi(){
				lyy.clear();
				option={type:'cube',x:50,y:50,z:0,l:400,w:400,h:25,is3d:true,animal:false,opacity:1,rotateX:80,rotateZ:10}
				lyy.setParam(option);
				option={type:'cube',x:125,y:125,z:25,l:250,w:250,h:25,is3d:true,animal:false,opacity:1,colors:['#0a38c1']}
				lyy.addObject(option);
				option={type:'cube',x:200,y:200,z:50,l:100,w:100,h:25,is3d:true,animal:false,opacity:1,colors:['green']}
				lyy.addObject(option);
				option={type:'cube',x:245,y:245,z:75,l:5,w:5,h:300,is3d:true,animal:false,opacity:1,colors:['#dedbd8']}
				lyy.addObject(option);
				option={type:'cube',x:252.5,y:252.5,z:300,l:150,w:5,h:75,is3d:true,animal:false,opacity:1,colors:['red']}
				lyy.addObject(option);
			}
//			guoqi();
		</script>
	</body>
</html>
